// 表单容器

<script lang='ts'>
import {Component, Prop, Vue} from 'vue-property-decorator'
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'

const toolsBar = () => import('../form_tools_bar/index.vue');

import dynamicContainer from '@/components/ivew_components/dynamic_container/index'
    

@Component({})

export default class formContainer extends dynamicContainer{
    name:string = 'formContainer'
    toolsBar:any = toolsBar

    @Prop()
    componentConf

    @Prop()
    controlBtns
    
    render(h){

        let _vue = this;
        let components = [];
        let cNum = 0
       

        // 动态组件
        this.componentConf.forEach((mod, index) =>{

            components.push(
                h(mod.component,{

                    key: index,
                    
                    props: {
                        ..._vue.buildProps(mod.propsData),
                    },
                    
                    style:_vue.mixStyle(mod.layout, mod.style),
                    
                })
            )

            if(components[index]['tag']){
                cNum++
            }
            
        })

        // 工具条
        let tools = h('div', {
            attrs:{
                class: 'tools'
            }
            },
            [
                h(toolsBar,{
                    props:{
                        toolsFunConf: _vue.controlBtns
                    }
                })
            ]
        )

        // 过渡效果
        let transitionCmp = h('transition-group', {

            props: {name: 'right-to-left'},
            attrs:{
                class: 'content'
            }
            
        }, [components])

        
        if(cNum === components.length){
               
            return h('div',{

                attrs:{
                    class: 'form-container'
                }
                
            }, [ tools, transitionCmp ])
        }

     
        
    }
   
}
</script>

<style scoped lang='scss'>

.form-container{
    overflow: hidden;
    display: grid;
    grid-template-columns: auto _rem(60px);
    height: 100%;
    
    .content{
        overflow: auto;
        grid-area: 'content';
        grid-column: 1/2;
        grid-row: 1/2;

        padding: _rem(20px);
        display: grid;
        grid-column-gap: _rem(20px);
        grid-row-gap: _rem(20px);
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        grid-template-rows: repeat(2 1fr);
    }

    .tools{
        padding-top: _rem(20px);
        grid-area: 'tools';
        grid-column: 2/3;
        grid-row: 1/2;
        background: $block_bg_color;
    }
    
}


</style>